<%@ page import="com.interfaces.TravelAgentController" %>
<%@ page import="com.interfaces.SendAgentController" %>
<%@ page import="com.core.sysDict.SysDictJsp" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<style type="text/css">
    select2-container--open{  
        z-index:9999999           
}  
</style>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>旅行社信息</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <%
    	String path = request.getContextPath();
            path = "/".equals(path)?"":path;
            request.setAttribute("path", path);
            String sysDictJson=SysDictJsp.getSysDictJson(session);
    %>
    <script type="text/javascript">
        var path = "${path}";
    </script>

    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="${path}/public/adminlte/bootstrap/css/bootstrap.min.css">
    <!-- modal -->
     <link rel="stylesheet" href="${path}/js/bootstrap-modal/css/bootstrap-modal-bs3patch.css">
     <link rel="stylesheet" href="${path}/js/bootstrap-modal/css/bootstrap-modal.css">
	<!-- Select2 -->
  	<link rel="stylesheet" href="${path}/public/adminlte/plugins/select2/select2.min.css">	
    <!-- Font Awesome -->
    <link rel="stylesheet" href="${path}/public/font-awesome-4.7.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="${path}/public/ionicons/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="${path}/public/adminlte/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="${path}/public/adminlte/dist/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="${path}/css/common.css">
    <!-- Bootstrap TABLE -->
	<script src="${path}/js/bootstrap-table/bootstrap-table.css"></script>
    <script type="text/javascript" src="${path}/js/json2.js"></script>
</head>
<body >

<div class="container">
<!-- Modal新增 -->
<div class="modal fade" id="myNewModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 
  <div class="modal-dialog" role="document" style="width: 400px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">新增送签社信息</h4>
      </div>
      <div class="modal-body">
        
        <form style="height:300px; overflow:auto; ">
          <div class="form-group">
            <label for="recipient-name" class="control-label">送签社id:</label>
            <select  class="form-control" id="sendAgencyId"></select>
          </div>
          <div class="form-group" hidden="hidden">
            <label for="recipient-name" class="control-label">旅行社id:</label>
            <input type="text"  class="form-control" id="travelAgentId">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="newAdd">保存</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal编辑修改  -->
<div class="modal fade" id="myEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"style="width: 400px;">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">编辑修改</h4>
      </div>
      <div class="modal-body">
        <form style="height:300px; overflow:auto; ">
          <div class="form-group">
            <label for="recipient-name" class="control-label">送签社id:</label>
            <select  class="form-control" id="sendAgencyId2"></select>
          </div>
          <div class="form-group" hidden="hidden">
            <label for="recipient-name" class="control-label">旅行社id:</label>
            <input type="text"  class="form-control" id="travelAgentId2">
          </div>
          <div class="form-group" hidden="hidden">
            <label for="recipient-name" class="control-label">关系表id:</label>
            <input type="text"  class="form-control" id="relationId">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" id="EditToSave"class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>
            <div class="row">
                 <div class="col-md-4">
                    <div class="form-group">
                        <label for="travelAgentName">旅行社机构名</label>
                        <input type="text" class="form-control" id="travelAgentName" validata="len" errormsg="" emptyerrormsg="旅行社机构名称不能为空" empty="false" limitLength="60">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="phone">联系电话</label>
                        <input type="text" class="form-control" id="phone" validata="len" errormsg="" emptyerrormsg="电话号码不能为空" empty="false" limitLength="30">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="remark">备注</label>
                        <input type="text" class="form-control" id="remark" validata="len" errormsg="" emptyerrormsg="备注" empty="false" limitLength="6">
                    </div>
                </div>
            </div>
            <div class="row">
            	<div id="toolbar" class="btn-group">
            		<button id="btn_add" type="button" data-toggle="modal"  data-target="#myNewModal" class="btn btn-default">
                		<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            		</button>
        		</div>
            	<table id="dg1"></table>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <button type="submit" class="btn btn-primary" id="btnAdd">保 存</button>
                </div>
            </div>
<!-- ./wrapper -->
</div>
<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 2.2.3 -->
<script src="${path}/public/adminlte/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="${path}/public/adminlte/bootstrap/js/bootstrap.min.js"></script>
<!-- Bootstrap TABLE -->
<script src="${path}/js/bootstrap-table/bootstrap-table.js"></script>
<script src="${path}/js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<!-- modal -->
<script src="${path}/js/bootstrap-modal/js/bootstrap-modal.js"></script>
<script src="${path}/js/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
<!-- bootstrap table editor -->
<script src="${path}/js/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
<!--toolbar  -->
<script src="${path}/js/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.js"></script>
<!-- Select2 -->
<script src="${path}/public/adminlte/plugins/select2/select2.full.min.js"></script>
<!-- SlimScroll -->
<script src="${path}/public/adminlte/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="${path}/public/adminlte/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="${path}/public/adminlte/dist/js/app.min.js"></script>
<!-- 判空和输入检测 -->
<script src="${path}/js/validata.js"></script>
<script src="${path}/js/sysDict.js"></script>
<script>
	function outputObj(repo) { var description = ""; for (var i in repo) { description += i + " = " + repo[i] + "\n"; } console.info(description); }
	function formatRepo (repo) {
	  outputObj(repo);
      if (repo.loading) {return repo.text;}
      return repo.text+"("+repo.id+")";
    }

    function formatRepoSelection (repo) {
    console.info(repo.text+"qq3243432");
    return repo.text; 
    }
    /* 新增框的select */
    $("#sendAgencyId").select2({
	language: "zh-CN",
	/* initSelection : function (element, callback) {
        var data = {id:1, text:"一"};
        callback(data);
        }, */
	dropdownParent: $("#myNewModal"),
	width: "100%",
  	ajax: {
        url: "${path}<%=SendAgentController.URL_SEARCH%>",
        dataType: 'json',
        delay: 1000,
        type:"post",
        data: function (params) {
        params.page = params.page || 1;
          return {
            code: params.term, // 关键字
            curPage: params.page, 
            pageSize: 10,
	        singlePage: 0          
          };
        },
        
        processResults: function (data, params) {
          params.page = params.page || 1;
          return {
            results: data.items,//items:数据 data.total_count:总记录数,items中，字段id为option中的value值，
            pagination: {
              more: (params.page * 10) < data.total_count //页数*每页记录数小于总记录数时，可记录下拉
            }
          };
        },
        cache: true
      },
      escapeMarkup: function (markup) { return markup; },
      minimumInputLength: 0,
      templateResult: formatRepo,
      templateSelection: formatRepoSelection
	});
	/* 编辑框的select2 */
	$("#sendAgencyId2").select2({
	language: "zh-CN",
	/* initSelection : function (element, callback) {
        var data = {id:1, text:"一"};
        callback(data);
        }, */
	dropdownParent: $("#myEditModal"),
	width: "100%",
  	ajax: {
        url: "${path}<%=SendAgentController.URL_SEARCH%>",
        dataType: 'json',
        delay: 1000,
        type:"post",
        data: function (params) {
        params.page = params.page || 1;
          return {
            code: params.term, // 关键字
            curPage: params.page, 
            pageSize: 10,
	        singlePage: 0          
          };
        },
        
        processResults: function (data, params) {
          params.page = params.page || 1;
          return {
            results: data.items,//items:数据 data.total_count:总记录数,items中，字段id为option中的value值，
            pagination: {
              more: (params.page * 10) < data.total_count //页数*每页记录数小于总记录数时，可记录下拉
            }
          };
        },
        cache: true
      },
      escapeMarkup: function (markup) { return markup; },
      minimumInputLength: 0,
      templateResult: formatRepo,
      templateSelection: formatRepoSelection
	});
    var id = (new Date()).valueOf();
	$('#myNewModal').on('show.bs.modal', function (e) {
  			$('#travelAgentId').val(id);
	})
var table= $("#dg1").bootstrapTable({  
        url: "${path}<%=TravelAgentController.URL_SHOWRELATION%>?travelAgentId="+id,
        method: "post",
        dataType: "json",  
        striped: true,//设置为 true 会有隔行变色效果  
        undefinedText: "空",//当数据为 undefined 时显示的字符  
        pagination: true, //分页  
        showColumns: false, //显示隐藏列   
        pageNumber: 1,//如果设置了分页，首页页码  
        pageSize: 10,//如果设置了分页，页面数据条数  
        pageList: [5, 10, 20, 40],  //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。  
        paginationPreText: '上一页',//指定分页条中上一页按钮的图标或文字,这里是<  
        paginationNextText: '下一页',//指定分页条中下一页按钮的图标或文字,这里是>  
        search: false, //显示搜索框  
        data_local: "zh-CN",//表格汉化  
        sidePagination: "server", //服务端处理分页  
        queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的  
            return {//这里的params是table提供的  
                start: params.offset,//从数据库第几条记录开始  
                length: params.limit//找多少条  
            };  
        },  
        idField: "id",//指定主键列
        uniqueId:"id",  
        columns: [  
            {  
                title: '序号',//表的列名  
                field: 'id',//json数据中rows数组中的属性名  
                align: 'center',
                hidden:true
            },  
            {  
                title: '送签社代码',  
                field: 'sendAgentCode',  
                align: 'center'  
            },  
            {  
                title: '送签社名字:',  
                field: 'sendAgentName',  
                align: 'center'  
            },  
            {  
                title: '旅行社id',  
                field: 'travelAgentId',  
                align: 'center',
                hidden:true  
            },  
            {  
                title: '送签社id',  
                field: 'sendAgentId',  
                align: 'center',
                hidden:true  
            },  
            {  
                title: '操作',  
                field: 'id',  
                align: 'center',  
                formatter: function (value, row, index) {//自定义显示可以写标签哦~  
                    return '<button href="#" mce_href="#" data-toggle="modal"  data-target="#myEditModal" onclick="edit(\'' + row.id + '\')">修改</button> <button href="#" mce_href="#"onclick="del(\'' + row.id + '\')">删除</button> ';  
                }  
            }  
  
        ]  
    });
    /* 点击表格里的编辑按钮 */
    function edit(code){
   		var rowData=$("#dg1").bootstrapTable("getRowByUniqueId",code);
		$('#myEditModal').on('show.bs.modal', function (e) {
  			$('#travelAgentId2').val(id);
  			$('#relationId').val(rowData.id);
  			$("#sendAgencyId2").append("<option value='"+rowData.sendAgentId+"'>"+rowData.sendAgentName+"</option>");
			$("#sendAgencyId2").change(); 
		});
    }
    function del(code){
   		var rowData=$("#dg1").bootstrapTable("getRowByUniqueId",code);
		if(confirm("确定删除所选项目?")){ 
			$.ajax( {  
                type: "post",  
                "url":"${path}<%=TravelAgentController.URL_DELRELATION%>",
                data:{id:rowData.id},  
                dataType: "json",  
                success: function (json) {
                console.log(json);
                if(json.returnCode=="0"){
                	table.bootstrapTable('refresh', {url:"${path}<%=TravelAgentController.URL_SHOWRELATION%>?travelAgentId="+id});
                }else{
                success(json);
                alert("不成功!");
                }  
                }  
            } );  
         }    
	}		
$(function () {
	$('#dg1').bootstrapTable('hideColumn', 'id');
	$('#dg1').bootstrapTable('hideColumn', 'travelAgentId');
	$('#dg1').bootstrapTable('hideColumn', 'sendAgentId');
	$("#EditToSave").click(function () {
		var sendAgencyId2=$("#sendAgencyId2").val();
		var relationId=$("#relationId").val();
		var travelAgentId2=$("#travelAgentId2").val();
		console.info(sendAgencyId2);
		if(sendAgencyId2==""||sendAgencyId2==null){
			alert("请输入送签社!")
			return false;
		}
		$.ajax({
			type: "post",
			url:"${path}<%=TravelAgentController.URL_UPDATERELATION%>",
			data:{
                id:relationId,
                travelAgentId:travelAgentId2,
                sendAgentId:sendAgencyId2
            },
			dataType: "json",  
            success: function (json) {
            console.log(json);
            if(json.returnCode=="0"){
           		table.bootstrapTable('refresh', {url:"${path}<%=TravelAgentController.URL_SHOWRELATION%>?travelAgentId="+id});
           		$('#myEditModal').modal('hide')
           }else{
           alert("不成功!");
           }  
           }
		})	
	});
	$("#newAdd").click(function () {
		var sendAgencyId=$("#sendAgencyId").val();
		console.info(sendAgencyId);
		if(sendAgencyId==""||sendAgencyId==null){
			alert("请输入送签社!")
			return false;
		}
		$.ajax({
			type: "post",
			url:"${path}<%=TravelAgentController.URL_ADDRELATION%>",
			data:{
                travelAgentId:id,
                sendAgentId:sendAgencyId
            },
			dataType: "json",  
            success: function (json) {
            console.log(json);
            if(json.returnCode=="0"){
           		table.bootstrapTable('refresh', {url:"${path}<%=TravelAgentController.URL_SHOWRELATION%>?travelAgentId="+id});
           		$('#myNewModal').modal('hide')
           }else{
           alert("不成功!");
           }  
           }
		})	
	});
    $("#btnAdd").click(function () {
        var travelAgentName = $("#travelAgentName").val();
         if(travelAgentName == ""){
            alert("请输入旅行社名称");
           return false;
        }
        var phone = $("#phone").val();
         if(phone == ""){
            alert("请输入联系方式");
            return false;
        }
        var remark = $("#remark").val();
        $.ajax({
            url:"${path}<%=TravelAgentController.URL_ADD%>",
            type:"post",
            data:{
                id:id,
                travelAgentName:travelAgentName,
                phone:phone,
				remark:remark,
            },
            success:function(result){
                var re = JSON.parse(result);
                if(re.returnCode=="0"){
                	alert("新增旅行社信息成功！");
                	var url= window.location.search;
                	var arr = url.split('&');
                	parent.refresh(arr[arr.length-1]);
                    parent.closeAndActiveTab(arr[arr.length-2],arr[arr.length-1]);
                }else{
                    alert(re.msg);
                }
            },
            error:function(request) {      // 设置表单提交出错
                alert(request);  //登录错误提示信息
            }
        });
        return false;
     });
     });
</script>
</body>
</html>
